<template>
    <div id="leave_list_page">
        <el-card class="leave_list_card">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb_post">
                <el-breadcrumb-item :to="{path: '/info'}">首页</el-breadcrumb-item>
                <el-breadcrumb-item>请假</el-breadcrumb-item>
                <el-breadcrumb-item>申请列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table
            :data="leaveData"
            :default-sort="{prop: 'appID', order: 'ascending'}"
            stripe
            style="width: 95%; margin: auto;">
                <el-table-column
                label="申请序号"
                prop="appID"
                align="center"
                width="70">
                </el-table-column>
                <el-table-column
                prop="startTime"
                label="开始时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="endTime"
                label="结束时间"
                width="120">
                </el-table-column>
                <el-table-column
                label="类型">
                    <template slot-scope="scope">
                        <p>
                            {{leave_type[scope.row.type]}}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                prop="reason"
                label="申请理由">
                </el-table-column>
                <el-table-column
                label="申请人"
                prop="empName"
                width="90">
                </el-table-column>
                <el-table-column
                label="申请人编号"
                prop="empID"
                width="90">
                </el-table-column>
                <el-table-column
                label="申请状态"
                width="135"
                >
                <template slot-scope="scope">
                    <p>
                        {{leave_state[scope.row.state]}}
                    </p>
                </template>
                </el-table-column>
                <el-table-column
                label="操作"
                width="100"
                >
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editLeave(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteLeave(scope.row, scope.$index)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog title="编辑申请信息" :visible.sync="editDialogVisible" style="margin:auto; padding:5%;" class="editDialog">
            <el-form :model="leave_editing" class="edit-form">
                <el-form-item label="假期类型" prop="type">
                    <el-select v-model="leave_editing.type" placeholder="假期类型">
                        <el-option label="出差" value="0"></el-option>
                        <el-option label="婚假" value="1"></el-option>
                        <el-option label="产假" value="2"></el-option>
                        <el-option label="年假" value="3"></el-option>
                        <el-option label="事假" value="4"></el-option>
                        <el-option label="病假" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-col :span="6">
                        <el-date-picker type="date" placeholder="开始日期" v-model="leave_editing.startTime" 
                        style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-col :span="6">
                        <el-date-picker type="date" placeholder="结束日期" v-model="leave_editing.endTime" 
                        style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="申请理由" prop="reason">
                    <el-input type="textarea" v-model="leave_editing.reason" style="width:80%; font-family:sans-serif;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="putLeave(leave_editing.appID)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="确认删除申请" :visible.sync="deleteDialogVisible" width="30%">
            <el-button style="width:15%; margin:auto;" type="danger" @click="confirmDelete()">确认</el-button>
        </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'LeaveList',
    data() {
        return {
            leaveData: [],
            editDialogVisible: false,
            deleteDialogVisible: false,
            leave_editing: {},
            id_delete: '',
            row_delete: '',
            leave_state: ['被拒绝', '待部门经理审批', '待副总经理审批', '待总经理审批', '已批准'],
            leave_type: ['出差', '婚假', '产假', '年假', '事假', '病假']
      }
    },
    methods: {
        date2Str(date) {
            let month = (date.getMonth() > 9? date.getMonth() : "0" + date.getMonth());
            let day = (date.getDate() > 9? date.getDate() : "0" + date.getDate());
            return date.getFullYear() + '-' + month + '-' + day;
        },
        editLeave(row) {
            let that = this;
            if (row.state != 0) {
                this.leave_editing = row;
                this.editDialogVisible = true;
            }
            else {
                that.$message({
                    showClose: true,
                    tpye: 'error',
                    message: '申请已被拒绝，处于作废状态，无法继续修改'
                })
            }
        },
        putLeave(appID) {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/leave', {
                method: 'PUT',
                body: JSON.stringify({
                    Leave: {
                        appID: appID,
                        empID: that.leave_editing.empID,
                        reason: that.leave_editing.reason,
                        startTime: that.leave_editing.startTime,
                        endTime: that.leave_editing.endTime,
                        type: that.leave_editing.type,
                        state: '1'
                    }
                }),
                headers: new Headers({
                  'Content-Type': 'application/json',
                  'username': that.$store.state.username,
                  'Token': that.$store.state.token
                })
            }).then(res => {
                if (res.status == 200) {
                    that.$message({
                      showClose: true,
                      message: '修改提交成功',
                      type: 'success'
                    });
                }
                else {
                    that.$message({
                      showClose: true,
                      message: res.status + ' - 提交出现错误',
                      type: 'error'
                    });
                }
            }).then(that.editDialogVisible = false)
        },
        deleteLeave(row, index) {
            this.id_delete = row.appID;
            this.deleteDialogVisible = true;
            this.row_delete = index;
        },
        confirmDelete() {
            let that = this;
            fetch('http://localhost:9095/AttendanceSystem/leave' + "?appID=" + that.id_delete, {
                method: 'DELETE',
                headers: new Headers({
                  'Content-Type': 'application/json',
                  'username': that.$store.state.username,
                  'Token': that.$store.state.token
                })
            }).then(res => {
                if (res.status == 200) {
                    that.$message({
                      showClose: true,
                      message: '删除成功',
                      type: 'success'
                    });
                    that.leaveData.splice(that.row_delete, 1);
                }
                else {
                    that.$message({
                      showClose: true,
                      message: res.status + ' - 删除出现错误',
                      type: 'error'
                    });
                }
            }).then(that.deleteDialogVisible = false)
        }
    },
    beforeRouteEnter(to, from, next) {
        console.log('from', from.path, 'to', to.path);
        next(vm => {
            fetch('http://localhost:9095/AttendanceSystem/leave/id' + '?empID=' + vm.$store.state.username, {
                method: 'GET',
                headers: new Headers({
                  'Content-Type': 'application/json',
                  'username': (vm.$store.state.username == null? sessionStorage.getItem("username") : vm.$store.state.username),
                  'Token': (vm.$store.state.token == null? sessionStorage.getItem("token") : vm.$store.state.token)
                })
            }).then(res => res.json())
            .then(json => {vm.leaveData = json/*console.log(json)*/});
        })
    }
  }
</script>

<style>
.edit-form {
    margin-left: 5%;
    margin-right: 5%;
}
.leave_list_card {
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 3%;
}
.breadcrumb_post {
    margin-left: 8px;
    margin-bottom: 20px;
}
</style>